<template>
	<view>
		<view class="bgbox">
			<view class="qipao1">
			</view>
			<view class="qipao2">
			</view>
		</view>
		<view class="qbboxitem" v-for="(item,index) of couponList" :key="index">
			<view class="mainqbbox">
				<view class="mainqbboxcon">
					<view class="maiqbtitle">
						<!-- 5张满减线上商城 通用券 折扣券 -->
						{{item.title}}
					</view>
					 
				</view>
			</view>
			<view class="qbmainbox">
				<view class="baototalnum">
					<view class="baototalleft">
						<view class="baotype">
							<!-- 商城通用券 -->
							<text v-if="item.module_type==1">商城券包</text>
							<text v-else-if="item.module_type==2">门店券包</text>
							<text v-else>混合券包</text>
							<!-- {{item.module_type==1?'商城券包':item.module_type==2?'门店券包':item.module_type=='1,2'?'混合券包':''}} -->
						</view>
						<view class="baonum">
							X{{item.number}}张
						</view>
					</view>
					<view class="baototaltule" @click="seeRules">
						券包活动规则
					</view>
				</view>
				<view class="quanlist">
					<view class="quanitem" v-for="(item,index) of item.couponData" :class="index%3==0?'first':''" :key="index">
						<view class="sfsx">
							立即生效
						</view>
						<view class="quantitle">
						<!-- 	满<text class="quanshengnum">100</text>减<text class="quanshengnum">5</text> -->
						{{item.coupon_title}}
						</view>
						<view class="yxq">
							有效期{{item.coupon_time}}天
						</view>
					</view>
				</view>
				<view class="tehui" @click="openPayType" :data-index="index" :data-price="item.price">
					<view class="thcontain" >
						限时特惠{{item.price}}元
					</view>
					<view class="thtip">
						超值惊喜
					</view>
				</view>
			</view>
		</view>
		<view style="height:110rpx;">
		</view>
		<view class="actbox">
			<tabact :tabact="tabact" activetextColor="'#E83929'" :actPosition="1" :activeIndex="activeIndex" @tabactChange="tabactChange" ></tabact> 
		</view>
		<!-- 选择支付方式 -->
		<wyb-popup ref="popup" type="bottom" radius="6" :showCloseIcon="false">
		    <view class="popup-content payment">
		        <view class="title">选择支付方式<text class="iconfont icon-guanbi" @click='close'></text></view>
				<view class="item acea-row row-between-wrapper" v-for="(item,index) in cartArr" :key="index"
					v-if='item.payStatus' @click="payTypeClick(item.number || 0 , item.value, index, item.name)">
					<view class="left acea-row row-between-wrapper">
						<view class="iconfont" :class="item.icon"></view>
						<view class="text">
							<view class="name">{{item.name}}</view>
							<view class="info" v-if="item.value == 'yue'">
								{{item.title}} 
								<span class="money">￥{{ useryue || '0.00' }}</span>
								<text class="recharge" @click.stop="recharge">去充值</text>
							</view>
							<view class="info" v-else>{{item.title}}</view>
						</view>
					</view>
					<view class="iconfont" :class="active==index?'icon-xuanzhong11 font-color':'icon-weixuan'"></view>
				</view>
				<view class="paypri">
					<text>支付</text><text>￥</text><text>{{totalPrice}}</text>
				</view>
				<view class="payBtn" >
					<view class="" @click="gopay">	
						去付款
					</view>
				</view>
		    </view>
		</wyb-popup>
		<view class="qbPaysuc" v-if="isPaysuc">
			<view >
				<view class="qbcon">
					<image clss="qbsucbg" src="../../../static/images/bg_qbbg00.png" mode="widthFix"></image>
					<view class="qbconn">
						<view class="qbsuctitle">
							{{totalPrice}}元兑换 {{couponList[itemActIndex].title}}
						</view>
						<view class="qbsuctype">
							{{couponList[itemActIndex].module_type==1?'商城券包':couponList[itemActIndex].module_type==2?'门店券包':couponList[itemActIndex].module_type=='1,2'?'混合券包':''}}
						</view>
					</view>
					<view class="qbpaysuctip">
						恭喜，券包购买成功
					</view>
					<view class="qbsuctotalnum" @click="jumpquan">
						{{couponList[itemActIndex].number}}张优惠券已放入您的账户 >
					</view>
					<view class="qbinonw" @click="closePayknow">
						我知道了
					</view>
				</view>
				<view class="qbcolse" @click="closePayknow">
					<image src="../../../static/images/closewh.png" mode=""></image>
				</view>
				
			</view>
		</view>
		<wyb-popup ref="popup1" type="center" radius="6" :showCloseIcon="true" width="600" height="700">
			<view class="">
				<view class="flex flex-aj-center padding30" style="font-size: 30rpx;">券包活动规则</view>
				<scroll-view scroll-y style="width: 100%; height: 600rpx; box-sizing: border-box; padding: 0 30rpx 30rpx;">
					{{ explain }}
				</scroll-view>
			</view>
		</wyb-popup>
	</view>
</template>

<script>
	import {
		couponPackList, couponPackPayment,
	} from '@/api/points_mall.js';
	import {
		getUserInfo
	} from '@/api/user.js';
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue';
	
	export default {
		components: {
			wybPopup
		},
		data() {
			return {
              tabact:[
              	{
              		name:'线上券包',
              		type:1
              	},
              	{
              		name:'门店券包',
              		type:2
              	}
              ], 
			  activeIndex:0,
			  active: 0, //支付方式切换
			  page:1,
			  limit:30,
			  couponList:[],
			  //支付方式
			  cartArr: [{
			  		"name": "微信支付",
			  		"icon": "icon-weixin2",
			  		value: 'weixin',
			  		title: '使用微信快捷支付',
			  		payStatus: 1,
			  	},
			  	
			  	{
			  		"name": "余额支付",
			  		"icon": "icon-yuezhifu",
			  		value: 'yue',
			  		title: '可用余额:',
			  		payStatus: 1,
			  	},
			  	
			  ],
			  itemActIndex:0 ,// 当前付款的是第几个
			  totalPrice:0,  //  当前需要支付的金额
			  from:'',
			  isPaysuc:false, // 支付成功弹窗  
			  useryue:'',
			  explain: ''
			}
		},
		// created:(){
		// 	// this.getcouponPackList()
		// },
		mounted(){
			// #ifdef H5
			this.from = this.$wechat.isWeixin() ? 'weixin' : 'weixinh5'
			// #endif
			// #ifdef MP
			this.from = 'routine'
			// #endif
			this.getcouponPackList()
			this.getUserInfo()
			// this.$refs.popup.show()
		},
		methods: {
			seeRules() {
				this.$refs.popup1.show()
			},
			jumpquan(){
				this.closePayknow()
				uni.navigateTo({
					url:'/pages/users/user_coupon/index'
				})
			},
			async getUserInfo(){
				var res = await getUserInfo()
			    this.useryue = res.data.now_money
			},
			closePayknow(){
				this.isPaysuc = false
			},
			openPayknow(){
				this.isPaysuc = true
			},
			async gopay(){
				var that = this
				var obj = this.couponList[this.itemActIndex]
				var payType = this.active===1?'yue':'weixin'
				if(this.active===1){
					// 判断当前余额是否足够
					console.log(that.totalPrice)
					console.log(that.useryue)
					if(that.useryue<that.totalPrice){
						return uni.showToast({
							title:'余额不足,请充值',
							icon:'none'
						})
					}
				}
				var data = {
					couponPackId:obj.id,
					payType,
					from: this.from
				}
				console.log(obj,data,payType)
				var res = await couponPackPayment(data)
				if(res.status===400){
					return uni.showToast({
							title:res.msg,
							icon:"none"
						})
				}
				console.log(res)
				let status = res.data.status,
					orderId = res.data.result.orderId,
					jsConfig = res.data.result.jsConfig,
					goPages = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=' + res.msg +
					'&type=3' + '&totalPrice=' + this.totalPrice
				
				switch (status) {
					case 'ORDER_EXIST':
					case 'EXTEND_ORDER':
					case 'PAY_ERROR':
						uni.hideLoading();
						return that.$util.Tips({
							title: res.msg
						}, {
							tab: 5,
							url: goPages
						});
						break;
					case 'SUCCESS':
						// uni.hideLoading();
						// if (that.BargainId || that.combinationId || that.pinkId || that.seckillId || that
						// 	.discountId)
						// 	return that.$util.Tips({
						// 		title: res.msg,
						// 		icon: 'success'
						// 	}, {
						// 		tab: 4,
						// 		url: goPages
						// 	});
						// return that.$util.Tips({
						// 	title: res.msg,
						// 	icon: 'success'
						// }, {
						// 	tab: 5,
						// 	url: goPages
						console.log(res,"支付成功")
						that.close()
						uni.hideLoading();
						that.isPaysuc = true
						
						break;
					case 'WECHAT_PAY':
						that.toPay = true;
						// #ifdef MP
						/* that.toPay = true; */
						uni.requestPayment({
							timeStamp: jsConfig.timestamp,
							nonceStr: jsConfig.nonceStr,
							package: jsConfig.package,
							signType: jsConfig.signType,
							paySign: jsConfig.paySign,
							success: (res)=> {
								console.log(res,"支付成功")
								uni.hideLoading();
								that.isPaysuc = true
							},
							fail: (e)=> {
								that.close()
								uni.showToast({
									title:'取消支付',
									icon:"none"
								})
							},
							complete: function(e) {
								that.close()
								// uni.hideLoading();
								// //关闭当前页面跳转至订单状态
								// if (res.errMsg == 'requestPayment:cancel') return that.$util
								// 	.Tips({
								// 		title: '取消支付'
								// 	}, {
								// 		tab: 5,
								// 		url: goPages + '&status=2'
								// 	});
							},
						})
						// #endif
						// #ifdef H5
						this.$wechat.pay(res.data.result.jsConfig).then(res => {
							console.log(res,"支付成功")
							uni.hideLoading();
							that.isPaysuc = true
						}).catch(res => {
							console.log(res)
							// if (!this.$wechat.isWeixin()) {
							// 	uni.redirectTo({
							// 		url: goPages +
							// 			'&msg=支付失败'
							// 	})
							// }
							// if (res.errMsg == 'chooseWXPay:cancel') return that.$util.Tips({
							// 	title: '取消支付'
							// });
						})
						// #endif
						// #ifdef APP-PLUS
						uni.requestPayment({
							provider: 'wxpay',
							orderInfo: jsConfig,
							success: (e) => {
								let url = goPages;
								uni.showToast({
									title: "支付成功"
								})
								setTimeout(res => {
									uni.redirectTo({
										url: url
									})
								}, 2000)
							},
							fail: (e) => {
								let url = '/pages/order_pay_status/index?order_id=' + orderId +
									'&msg=支付失败';
								uni.showModal({
									content: "支付失败",
									showCancel: false,
									success: function(res) {
										if (res.confirm) {
											uni.redirectTo({
												url: url
											})
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								})
							},
							complete: () => {
								uni.hideLoading();
							},
						});
						// #endif
						break;
					case 'PAY_DEFICIENCY':
						uni.hideLoading();
						//余额不足
						return that.$util.Tips({
							title: res.msg
						}, {
							tab: 5,
							url: goPages + '&status=1'
						});
						break;
					case "WECHAT_H5_PAY": //公众号
						uni.hideLoading();
						that.$util.Tips({
							title: '订单创建成功'
						}, {
							tab: 5,
							url: goPages + '&status=0'
						});
						setTimeout(() => {
							location.href = res.data.result.jsConfig.mweb_url;
						}, 100);
						break;
				
					case 'ALIPAY_PAY':
						//#ifdef H5
						if (this.from === 'weixin') {
							uni.redirectTo({
								url: `/pages/users/alipay_invoke/index?id=${orderId}&pay_key=${res.data.result.pay_key}`
							});
						} else {
							uni.hideLoading();
							that.formContent = res.data.result.jsConfig;
							that.$nextTick(() => {
								document.getElementById('alipaysubmit').submit();
							})
						}
						//#endif
						// #ifdef MP
						uni.navigateTo({
							url: `/pages/users/alipay_invoke/index?id=${orderId}&link=${jsConfig.qrCode}`
						});
						// #endif
						// #ifdef APP-PLUS
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: jsConfig,
							success: (e) => {
								uni.showToast({
									title: "支付成功"
								})
								let url = '/pages/order_pay_status/index?order_id=' + orderId +
									'&msg=支付成功';
								setTimeout(res => {
									uni.redirectTo({
										url: url
									})
								}, 2000)
				
							},
							fail: (e) => {
								let url = '/pages/order_pay_status/index?order_id=' + orderId +
									'&msg=支付失败';
								uni.showModal({
									content: "支付失败",
									showCancel: false,
									success: function(res) {
										if (res.confirm) {
											uni.redirectTo({
												url: url
											})
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								})
							},
							complete: () => {
								uni.hideLoading();
							},
						});
						// #endif
						break;
						case "400": //公众号
						uni.showToast({
							title:res.data.msg,
							icon:"none"
						})
						break;
				}
			},
			payTypeClick(number, paytype, index, name) {
				this.active = index;
				this.payType = paytype;
				this.paytypeTxt = name
				// this.$refs.popup.hide()
				// this.$emit('changePayType', paytype)
			},
			recharge() {
				uni.navigateTo({
					url: '/pages/users/user_payment/index'
				})
			},
			openPayType(e) {
				var {index, price} = e.currentTarget.dataset
				this.itemActIndex = index
				this.totalPrice = price
				this.$refs.popup.show()
			},
			close() {
				this.$refs.popup.hide()
			},
			async getcouponPackList(){
				var module_type = this.tabact[this.activeIndex].type
				var data = {
					module_type,
					page:this.page,
					limit: this.limit
				}
				var res =  await couponPackList(data)
				// console.log(res,99)
				this.couponList = res.data.list
				this.explain = res.data.explain
			},
          tabactChange(e){
          	this.activeIndex=e
			uni.showLoading({
				title:"加载中..."
			}) 
			this.getcouponPackList()
			uni.hideLoading()
          },
		}
	}
</script>

<style lang="less" scoped>
	.bgbox{
		height:487rpx;
		width:100%;
		background-color:#FEE396;
		position:fixed;
		top:0;
		left:0;
		border-radius: 0px 0px 156rpx 156rpx;
		.qipao1{
			width: 71rpx;
			height: 71rpx;
			background: rgba(255, 255, 255, 0.24);
			border-radius: 50%;
			position:absolute;
			left:20rpx;
			top:10rpx;
		}
		.qipao2{
			width: 100rpx;
			height: 100rpx;
			background: rgba(255, 255, 255, 0.24);
			border-radius: 50%;
			position:absolute;
			right:20rpx;
			top:10rpx;
			
		}
	}
	body {
		background-color: #fff;
	}

	.qbboxitem {
		width: 704rpx;
		margin: auto;
		min-height: 400rpx;
		position: relative;
        background: linear-gradient(97deg, #FF391F, #FF4A22);
        border-radius: 10rpx;
		margin-top:70rpx;
		
		.mainqbbox {
			width: 645rpx;
			height: 168rpx;
			background-color: #fff;
			border: 1px solid #ddd;
			border-radius:10rpx;
			margin: auto;
			top: 0rpx;
			left: 0;
			right: 0;
			margin: auto;
			padding: 30rpx;
			transform: translateY(-50rpx);
            position:relative;
			box-shadow: 0rpx 7rpx 10rpx 0px #D96E17;
			display:flex;
			align-items: cneter;
			justify-content: center;
			.mainqbboxcon {
				width:400rpx;
				margin:auto;
				.maiqbtitle{
					font-size: 34rpx;
					font-family: Adobe Heiti Std;
					font-weight: bold;
					color: #621900;
					line-height: 39rpx;
					margin-bottom:6rpx;
				}
				.maiqbdesc{
					font-size: 19rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: #93443D;
					line-height: 39rpx;
				}
				
			}

		}
		.mainqbbox:before{
			content:'';
			width:20rpx;
			height:20rpx;
			background-color:#E93423;
			position:absolute;
			border-radius:50%;
			left:-12rpx;
			top:50%;
			transform:translateY(-10rpx)
		}
		.mainqbbox:after{
			content:'';
			width:20rpx;
			height:20rpx;
			background-color:#E93423;
			position:absolute;
			border-radius:50%;
			right:-12rpx;
			top:50%;
			transform:translateY(-10rpx)
		}

		.qbmainbox {
			padding-bottom:44rpx;
			.baototalnum {
				width: 645rpx;
				margin:auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				margin-bottom: 40rpx;
				.baototalleft {
					display: flex;
					align-items: center;

					.baotype {
						width: 166rpx;
						height: 50rpx;
						background: #FFD006;
						border-radius: 25rpx;
						font-size: 24rpx;
						font-family: SourceHanSansCN;
						font-weight: 400;
						color: #621900;
						text-align: center;
						line-height:50rpx;
						margin-right:20rpx;
					}
					.baonum {
						font-size: 26rpx;
						font-family: SourceHanSansCN;
						font-weight: 400;
						color: #FFCF09;
					}
				}
				.baototaltule {
					
					font-size: 26rpx;
					font-weight: 400;
					color: #FFD006;
				}
			}

			.quanlist {
				width: auto;
				display: flex;
				flex-wrap: wrap;
				width: 582rpx;
				margin: auto;

				.quanitem {
					box-sizing: border-box;
					width: 184rpx;
					height: 182rpx;
					background: #FDE9C4;
					border-radius: 10rpx;
					margin-right:10rpx;
					margin-bottom:10rpx;
					position:relative;
					overflow:hidden;
					
				
					.sfsx{
						height:36rpx;
						position:absolute;
						background-color:#fff;
						right:0;
						top:0;
						padding-right:10rpx;
						padding-left:28rpx;
						border-bottom-left-radius:50rpx;
						text-align:right;
						font-size: 17rpx;
						font-weight: normal;
						color: #7C6F5C;
						line-height: 36rpx;
					}
					.quantitle{
						margin-top:56rpx;
						text-align:center;
						font-size: 28rpx;
						font-weight: normal;
						color: #8C5C40;
						.quanshengnum{
							color:#EF2A37;
						}
					}
					.yxq{
						text-align:center;
						margin-top:20rpx;
						font-size: 17rpx;
						font-family: Adobe Heiti Std;
						font-weight: normal;
						color: #C4AF78;
					}
				}

				.quanitem.first {
					margin-left: 0;
				}
			}
			.tehui{
				opacity: 1;
				margin:auto;
				position:relative;
				width: 611rpx;
				height: 81rpx;
				
				
				.thcontain{
					width:100%;
					height:100%;
					text-align:center;
					line-height:81rpx;
					background: #FFF7EC;
					margin-top:54rpx;
					border:1px solid #ddd;
					border-radius: 100rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: #E83928;
				}
				.thtip{
					position:absolute;
					right:40rpx;
					top:-20rpx;
					width: 129rpx;
					height: 37rpx;
					background: #FED106;
					border-radius: 40rpx;
					font-size: 22rpx;
					font-weight: bold;
					color: #9B3F0D;
					text-align: center;
				}
			}
		}
	}
	.actbox{
		background-color:#fff;
		position:fixed;
		bottom:0;
		width:100vw;
		left:0;
		height:100rpx;
		display:flex;
		justify-content: center;
		align-items: center;
	}
	
	.popup-content {
		padding: 0 40rpx 45rpx;
		.title {
			position: relative;
			width: 100%;
			height: 130rpx;
			line-height: 130rpx;
			text-align: center;
			font-size: 34rpx;
			border-bottom: 1px solid #eee;
		}
		
	}
	.payment .title .iconfont {
		position: absolute;
		right: 0rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 38rpx;
		color: #8a8a8a;
		font-weight: normal;
	}
	.payment.on {
		transform: translate3d(0, 0, 0);
	}
	.payment .item {
		border-bottom: 1rpx solid #eee;
		height: 130rpx;
	}
	
	.payment .item .left {
		width: 610rpx;
	}
	
	.payment .item .left .text {
		width: 540rpx;
	}
	
	.payment .item .left .text .name {
		font-size: 32rpx;
		color: #282828;
	}
	.payment .item .left .text .recharge {
		display: inline-block;
		width: 130rpx;
		height: 40rpx;
		line-height: 40rpx;
		background-color: #EB3822;
		color: #fff;
		text-align: center;
		margin-left: 30rpx;
	}
	.payment .item .left .text .info {
		display: flex;
		align-items: flex-end;
		font-size: 24rpx;
		color: #999;
	}
	
	.payment .item .left .text .info .money {
		color: #ff9900;
	}
	
	.payment .item .left .iconfont {
		font-size: 45rpx;
		color: #09bb07;
	}
	
	.payment .item .left .iconfont.icon-zhifubao {
		color: #00aaea;
	}
	
	.payment .item .left .iconfont.icon-yuezhifu {
		color: #ff9900;
	}
	
	.payment .item .left .iconfont.icon-yuezhifu1 {
		color: #eb6623;
	}
	
	.payment .item .iconfont {
		font-size: 40rpx;
		color: #ccc;
	}
	.paypri{
		padding:20rpx 0;
		text-align:center;
		text:first-cihld{
			font-size:28rpx;
		}
		text:nth-child(2){
			font-size:28rpx;
			color:#ff5637;
		}
		text:nth-child(3){
			font-size:36rpx;
			color:#ff5637;
		}
	}
	.payBtn{
		display:flex;
		align-items: center;
		justify-content: center;
		view{
			width:100%;
			background-color:#ff5637;
			font-size:30rpx;
			height:80rpx;
			border-radius:200rpx;
			text-align:center;
			line-height:80rpx;
			color:#fff;
			
		}
	}
	
	.qbPaysuc{
		width:100vw;
		height:100vh;
		background-color:rgba(0,0,0,.5);
		position:fixed;
		z-index:2;top:0;
		left:0;
		display:flex;
		align-items: center;
		justify-content: center;
		.qbcon{
			position:relative;
			.qbsucbg{
				width:565rpx;
			}
			.qbconn{
				position:absolute;
				left:0;
				right:0;
				margin:auto;
				z-index:1;
				top:80rpx;
				.qbsuctitle{
					width:400rpx;
					text-align:center;
					font-size: 37rpx;
					font-family: SourceHanSansCN;
					font-weight: bold;
					color: #A25A0C;
					margin:auto;
					margin-bottom:10rpx;
				}
				.qbsuctype{
					margin:auto;
					width:480rpx;
					text-align:center;
					font-size: 37rpx;
					font-family: SourceHanSansCN;
					font-weight: bold;
					color: #A25A0C;
				}
				
			}
			.qbpaysuctip{
				position:absolute;
				top:270rpx;
				left:0;
				right:0;
				margin:auto;
				font-size: 26rpx;
				font-family: SourceHanSansCN;
				font-weight: 400;
				color: #A25A0C;
				opacity: .6;
				text-align:center;
			}
			.qbsuctotalnum{
				position:absolute;
				bottom:156rpx;
				left:0;
				right:0;
				margin:auto;
				font-size: 27rpx;
				font-family: SourceHanSansCN;
				font-weight: 400;
				color: #FFFDE3;
				text-align:center;
			}
			.qbinonw{
				width: 480rpx;
				height: 90rpx;
				border: 2rpx solid #FFFDE3;
				text-align:center;
				line-height:90rpx;
				position:absolute;
				bottom:34rpx;
				left:0;
				right:0;
				margin:auto;
				font-size: 32rpx;
				font-family: SourceHanSansCN;
				font-weight: bold;
				color: #FFFFFF;
				border-radius:90rpx;
			}
		}
		.qbcolse{
			text-align: center;
			margin-top:63px;
			image{
				width:32rpx;
				height:32rpx;
			}
		}
	}
</style>
